<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>歌曲置顶和删除</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-size: 14px;
		}
		#song{
			width: 230px;
			margin: 0 auto;
		}
		h3,.choose{
			text-align: center;
			margin: 10px auto;
		}
		#song ul{
			list-style: none;
			height: 26px;
			line-height: 26px;
			border-bottom: 1px dashed #AAAAAA;
		}
		#song ul li{
			float: left;
		}
		#song ul li:not(:first-child){
			margin-left: 20px;
		}
		#song ul li:first-child{
			width: 120px;
			margin-left: 5px;
		}
		a{
			text-decoration: none;
		}
		#song ul:first-child li:first-child{
			color:red;
		}
	</style>
<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(":button").click(function(){
			var songname=$("input[name='songname']").val();
			$("input[name='songname']").val("");
			var songinfo=$("<ul><li>"+songname+"</li><li><a href='#' class='top'>置顶</a></li><li><a href='#' class='del'>删除</a></li></ul>");
			$("#song").append(songinfo);
			$("a[class='top']").click(function(){
				$(this).parent().parent().prependTo($("#song"));
			});
			$("a[class='del']").click(function(){
				$(this).parent().parent().remove();
			});
		});
		$("a[class='top']").click(function(){
			$(this).parent().parent().prependTo($("#song"));
		});
		$("a[class='del']").click(function(){
			$(this).parent().parent().remove();
		});
	});
</script>
</head>
<body>
<h3>点歌系统</h3>
<div class="choose">
	<label>歌名：</label>
	<input type="text" name="songname" size="10">
	<input type="button" value="点歌">
</div>
<div id="song">
	<ul>
		<li>没离开过</li>
		<li><a href="#" class="top">置顶</a></li>
		<li><a href="#" class="del">删除</a></li>
	</ul>
	<ul>
		<li>你知道我在等你吗</li>
		<li><a href="#" class="top">置顶</a></li>
		<li><a href="#" class="del">删除</a></li>
	</ul>
	<ul>
		<li>青花瓷</li>
		<li><a href="#" class="top">置顶</a></li>
		<li><a href="#" class="del">删除</a></li>
	</ul>
	<ul>
		<li>爱的初体验</li>
		<li><a href="#" class="top">置顶</a></li>
		<li><a href="#" class="del">删除</a></li>
	</ul>
	<ul>
		<li>那就这样吧</li>
		<li><a href="#" class="top">置顶</a></li>
		<li><a href="#" class="del">删除</a></li>
	</ul>
	<ul>
		<li>花心</li>
		<li><a href="#" class="top">置顶</a></li>
		<li><a href="#" class="del">删除</a></li>
	</ul>
</div>


</body>
</html>

